<template>
  <view class="pageLayout">
    <view class="title">
      <view class="name">{{ form.matchName }}·退款申请</view>
      <view class="time">发起时间：{{ form.applyRefundTime }}</view>
    </view>
    <u--form
      labelPosition="left"
      :model="form"
      :rules="rules"
      ref="MyForm"
      labelWidth="150rpx"
      :labelStyle="labelStyle"
    >
      <view class="base_info">
        <u-form-item label="客户名称" borderBottom prop="customerName">
          <u--input
            placeholder="请输入"
            :fontSize="fontSize"
            v-model="form.customerName"
            :inputAlign="'right'"
            :iconSize="'24rpx'"
            border="none"
            :disabled="true"
            disabledColor="#ffffff"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="退款链接"
          prop="customerResourceLinkType"
          borderBottom
          @click="showLinkPicker = false"
        >
          <myPicker
            :list="monyList"
            :show.sync="showLinkPicker"
            @close="closeNotPicker"
            keyName="label"
            v-model="form.customerResourceLinkType"
            idName="value"
            :inputAlign="'right'"
            :iconSize="'24rpx'"
            :fontSize="'24rpx'"
            @confirm="changeLink"
            placeholder="请选择链接"
            :showIcon="false"
          ></myPicker>
        </u-form-item>

        <u-form-item labelPosition="top" prop="customerRemark" borderBottom>
          <view class="labelStyle" style="font-size: 24rpx">客户原因</view>
          <u--textarea
            v-model="form.customerRemark"
            border="none"
            height="50"
            placeholder="请输入客户原因"
            :disabled="true"
          ></u--textarea>
        </u-form-item>
        <u-form-item labelPosition="top" prop="refundRemark">
          <view class="labelStyle" style="font-size: 24rpx">搭配师原因</view>
          <u--textarea
            v-model="form.refundRemark"
            border="none"
            height="50"
            placeholder="无"
            :disabled="true"
          ></u--textarea>
        </u-form-item>
        <u-form-item borderBottom>
          <view class="labelStyle" style="font-size: 24rpx">凭证</view>
          <custom-upload
            v-model="fileList"
            :max-count="5"
            @change="handleFileChange"
            :disabled="true"
          />
        </u-form-item>
      </view>
    </u--form>
    <view class="btn_width">
      <u-button
        class="btn"
        :loading="loading"
        @click="submitForm(true)"
        color="#ffffff"
        customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color:#A22C26;font-weight:700;"
        >罚款</u-button
      >
      <u-button
        class="btn"
        :loading="loading"
        @click="submitForm(false)"
        color="#a22d27"
        customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;"
        >不罚款</u-button
      >
    </view>
    <mytoast ref="toastRef" />
  </view>
</template>
<script>
import store from "../../store/index";
import myPicker from "@/components/myPicker";
import tagPicker from "@/components/tagPicker";
import customUpload from "@/components/customUpload.vue";
import mytoast from "@/components/mytoast.vue";
import {
  commitCustomerResourceLinkRefund,
  queryRefundLinkSelect,
} from "@/api/customer/index";
import {
  queryAppLeaderLinkRefundDetail,
  customerResourceLeaderApproveRefund,
} from "../api/refund/index.js";
export default {
  components: {
    myPicker,
    tagPicker,
    customUpload,
    mytoast,
  },
  data() {
    return {
      // imgUrl: "https://www.yinyaoit.com",
      id: "",
      showLinkPicker: false, //链接状态
      showLinkTypePicker: false, //链接类型
      showPayTypePicker: false, //链接类型
      showServiceTypePicker: false, //服务类型
      showLevelPicker: false, //SA分级
      showNotPicker: false, //签约结果
      showPicker: false, //
      isFillIn: false,
      loading: false,
      fileList: [],

      tagList: [
        { name: "需跟进", id: "需跟进", customerResourceTagLevel: "Record" },
        { name: "已添加微信", id: "已添加微信", key: "hasWeChat" },
        { name: "无效客资", id: "无效客资", key: "isInvalid" },
        { name: "高意向", id: "高意向", key: "isHignIntention" },
      ], // 标签列表
      monyList: [
        {
          label: "300",
          value: "ThreeHundred",
        },
        {
          label: "500",
          value: "FiveHundred",
        },
        {
          label: "1000",
          value: "OneThousand",
        },
        {
          label: "2000",
          value: "TwoThousand",
        },
        {
          label: "3000",
          value: "ThreeThousand",
        },
        {
          label: "4000",
          value: "FourThousand",
        },
        {
          label: "5000",
          value: "FiveThousand",
        },
      ],
      labelStyle: {
        "font-size": "24rpx",
      },
      fontSize: "24rpx",
      inputAlign: "right",
      form: {
        remark: "",
        customerRemark: "",
        refundProvePath: "",
        customerResourceLinkID: "",
      },
      selectedItems: [],
      rules: {
        customerRemark: [
          {
            type: "string",
            required: true,
            message: "请输入客户原因",
            trigger: ["blur", "change"],
          },
        ],
        customerResourceLinkID: [
          {
            type: "string",
            required: true,
            message: "请选择需要退款的链接",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 图片上传反馈
     * @param files 当前文件列表
     */
    handleFileChange(files) {
      console.log("当前文件列表:", files);
    },
    /**
     * 标签选择回调
     * @param value 选择的标签
     */
    handleTagConfirm(value) {
      console.log(value, "handleTagConfirm");
      let keyList = [];
      value.forEach((item) => {
        if (item.hasOwnProperty("key")) {
          keyList.push(item.key);
        }
      });
      this.tagList.map((item) => {
        if (!keyList.includes(item.key)) {
          this.form[item.key] = false;
        }
      });
      console.log(keyList, "keyList");

      this.selectedItems = value;
    },
    /**
     * 自定义标签添加
     * @param value 添加的标签
     */
    addTag(value) {
      console.log(value, "addTag");
      let obj = {
        name: value.tag,
        id: value.tag,
        customerResourceTagLevel: value.customerResourceTagLevel,
      };
      this.tagList.push(obj);
      this.selectedItems.push(obj);
    },
    /**
     * 链接状态
     */
    changeLink(val) {
      console.log(val, "changeLink");
    },
    /**
     * 获取客户信息
     */
    getInfo() {
      let data = {
        customerResourceLinkID: this.id,
      };
      console.log(data, "getInfo");
      queryAppLeaderLinkRefundDetail({ customerResourceLinkID: this.id }).then(
        (res) => {
          console.log(res.data, "res.data");
          this.form = res.data;
          if (res.data.refundProvePath) {
            this.fileList = [
              {
                path: res.data.refundProvePath,
                url: res.data.refundProvePath,
                status: "success",
              },
            ];
          }
        }
      );
    },
    /**
     * 表单提交
     */
    async submitForm(isFine) {
      // return;
      let imgArr = this.fileList.map((item) => {
        return item.url;
      });
      let data = {
        customerResourceLinkID: this.form.customerResourceLinkID,
        isFine: isFine,
      };
      console.log(data, "data");
      // return;
      customerResourceLeaderApproveRefund(data)
        .then((res) => {
          this.$refs.toastRef.showToast({
            msg: "审核完成",
            duration: 1000,
            position: "center",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 800);
        })
        .catch((e) => {
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 3000,
            position: "center",
          });
        });
      console.log(this.form, "this.form");
    },
    /**
     * 未签约原因选择器
     */
    closeNotPicker() {
      this.$nextTick(() => {
        this.showNotPicker = false;
        this.showLinkPicker = false;
        this.showLinkTypePicker = false;
        this.showPayTypePicker = false;
        this.showServiceTypePicker = false;
        this.showLevelPicker = false;
      });
    },
    /**
     * 标签选择器
     */
    handleConfirm(val) {
      this.$nextTick(() => {
        this.showPicker = false;
      });
    },
    /**
     * 获取链接列表
     */
    // getRefundList() {
    //   let data = {
    //     customerResourceID: this.id,
    //   };
    //   queryRefundLinkSelect(data).then((res) => {
    //     console.log(res.data, "res.data");
    //     this.linkList = res.data.map((item) => {
    //       return {
    //         ...item,
    //         ...item.extensios,
    //       };
    //     });
    //   });
    // },
  },
  onLoad(options) {
    console.log(options, "options");
    this.id = options.id;
    this.getInfo();
    // this.getRefundList();
  },
  onShow() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.MyForm.setRules(this.rules);
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>
<style>
page {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.pageLayout {
  padding: 24rpx;
}
.base_info {
  background-color: #ffffff;
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}
.labelStyle {
  margin-bottom: 24rpx;
}
.submit-container {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f5f7fb;
}
.btn_width {
  display: flex;
  width: 90%;
  margin: 60rpx auto;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
}
.title {
  margin-top: 40rpx;
  .name {
    font-size: 36rpx;
    font-weight: bold;
    color: #000000;
  }

  .time {
    margin-top: 8rpx;
    font-size: 26rpx;
    color: #c8c9cc;
  }
}
</style>
